<template>
  <view class="container">
    <float-button name="partnerDailyMenu" />
    <!-- 查看点赞排行 -->
    <image
      class="prodPraiseRanking-img"
      src="/static/image/rank.png"
      @click="onLocation('/pages/repast/prodPraiseRanking')"
    />

    <FilterView ref="filterView">
      <template #search>
        <uni-datetime-picker
          type="date"
          v-model="queryData.date"
          @confirm="onSearch"
          @change="changeDate"
          :clear-icon="false"
        />
      </template>
      <template #form>
        <uni-forms
          ref="filterForm"
          v-model="queryData"
          label-position="top"
          label-width="150"
        >
          <uni-row :gutter="26">
            <uni-col :span="12">
              <uni-forms-item label="餐别" name="part">
                <uni-data-select
                  placeholder="请选择"
                  :localdata="part"
                  v-model="queryData.part"
                />
              </uni-forms-item>
            </uni-col>
            <uni-col :span="12">
              <uni-forms-item label="餐厅" name="partnerShopId">
                <uni-data-select
                  placeholder="请选择"
                  :localdata="partnerShopId"
                  v-model="queryData.partnerShopId"
                />
              </uni-forms-item>
            </uni-col>
          </uni-row>
        </uni-forms>
      </template>
      <template #footer>
        <view class="filterBtn">
          <button class="btn r" type="primary" @click="onReset">重置</button>
          <button class="btn s" type="primary" @click="onSure('filterForm')">
            确定
          </button>
        </view>
      </template>
    </FilterView>

    <!-- <view class="date-p">
      <uni-datetime-picker type="date" v-model="date" @change="changeDate" />
    </view> -->

    <view class="listBox">
      <list-scroll-view
        :ref="'scrollView0'"
        :api="listPartnerDailyMenu"
        :init="{}"
        :refresherEnabled="enabled"
        height="80vh"
      >
        <template v-slot:list="{ data }">
          <view class="box">
            <uni-swipe-action>
              <uni-swipe-action-item
                class="outerItem"
                :threshold="0"
                :right-options="rightOptions"
                v-for="(item, i) in data"
                :key="i"
                @click="$noMultipleClicks(onClick, { $event, item })"
              >
                <view class="item">
                  <view
                    class="point"
                    :class="{
                      green: item?.shouldRoundsNum === item?.alreadyRoundsNum,
                    }"
                  />

                  <view class="m">
                    <view class="k">
                      <view class="name">{{
                        $util.selectDictLabel(part, item?.part)
                      }}</view>
                      <view class="value">{{ item?.name }} </view>
                      <view class="status" @click="toNutrition(item)"
                        >营养成分</view
                      >
                      <view class="verygood">
                        <image
                          v-if="!zanObj[i] || !zanObj[i].zan"
                          class="img"
                          src="/static/image/zan.png"
                          @click="dianzan(item, i)"
                        />
                        <image
                          v-else
                          class="img"
                          src="/static/image/zanActive.png"
                        />
                      </view>
                    </view>
                    <view class="l">
                      <view class="block">菜品价格: {{ item?.price }}</view>
                      <view class="block"
                        >餐厅:
                        {{
                          $util.selectDictLabel(
                            partnerShopId,
                            item?.partnerShopId
                          )
                        }}</view
                      >
                    </view>
                  </view>
                </view>
              </uni-swipe-action-item>
            </uni-swipe-action>
          </view>
        </template>
        <template #empty>
          <view class="uni-nodata">暂无数据!</view>
        </template>
      </list-scroll-view>
    </view>
  </view>
</template>

<script>
import _ from 'lodash';
import {
  listPartnerDailyMenu,
  getPartnerShop,
  addPartnerProdPraise,
} from '@/api/repast';
import FilterView from '@/components/FilterView/index.vue';
import ListScrollView from '@/components/ListScrollView/index.vue';
import ViewAudit from '../workOrder/viewAudit.vue';
export default {
  components: {
    FilterView,
    ListScrollView,
    ViewAudit,
  },
  data() {
    return {
      queryData: {},
      zanObj: {},
      part: [
        {
          label: '早餐',
          text: '早餐',
          value: 1,
        },
        {
          label: '午餐',
          text: '午餐',
          value: 2,
        },
        {
          label: '晚餐',
          text: '晚餐',
          value: 3,
        },
        {
          label: '夜宵',
          text: '夜宵',
          value: 4,
        },
      ],
      partnerShopId: [],
      enabled: false,
      // 右侧选项内容及样式
      rightOptions: [
        {
          text: '扫码打卡',
          style: {
            backgroundColor: '#007aff',
          },
        },
      ],
      // api
      listPartnerDailyMenu,
      // 重复点击，使用noMultipleClicks方法时，需要在当前页面创建此变量
      noClick: true,
    };
  },
  onLoad(query) {
    getPartnerShop().then((res) => {
      this.partnerShopId = res.data.map((v) => {
        return {
          text: v.name,
          label: v.name,
          value: v.partnerShopId,
        };
      });
    });
  },
  onShow() {
    this.queryData.date = this.$util.timestampToTime(
      new Date().getTime(),
      'YYYY-MM-DD'
    );
    this.$nextTick(() => {
      this.$refs[`scrollView0`].searchData(this.queryData);
    });
  },
  methods: {
    onSure(ref) {
      this.$refs[ref]
        .validate()
        .then((res) => {
          this.$refs[`scrollView0`].searchData(this.queryData);
          this.$refs.filterView.onClose();
        })
        .catch((err) => {
          console.log('err', err);
        });
    },
    onReset() {
      this.queryData = {
        date: this.$util.timestampToTime(new Date().getTime(), 'YYYY-MM-DD'),
      };
    },
    onSearch(e) {
      this.$refs[`scrollView0`].searchData(this.queryData);
    },
    // 刷新
    changeDate(v) {
      this.queryData.date = v;
      this.$refs[`scrollView0`].searchData(this.queryData);
    },
    // 点赞
    dianzan(row, index) {
      // uni.showToast({ title: '点赞成功' });
      const data = {
        partnerProdId: row.partnerProdId,
        partnerShopId: row.partnerShopId,
        date: row.date,
        part: row.part,
        price: row.price,
      };
      addPartnerProdPraise(data).then((res) => {
        this.zanObj[index] = { zan: true };
      });
    },
    // 跳转
    onClick(e) {
      const { $event, item } = e;
      if (e) {
        /* #ifdef H5 */
        uni.showToast({
          icon: 'none',
          title: `H5页面不支持扫码功能`,
          duration: 5000,
        });
        /* #endif */
        /* #ifndef H5 */
        let nowDate = new Date().getTime();
        let startDate = new Date(item.startTime).getTime(),
          endDate = new Date(item.endTime).getTime();
        if (nowDate > startDate && nowDate < endDate) {
          // 只允许通过相机扫码
          uni.scanCode({
            onlyFromCamera: true,
            success: (res) => {
              console.log('条码类型：', res.scanType);
              console.log('条码内容：', res.result);
              // 取path
              let path;
              if (
                res.scanType == 'WX_CODE' &&
                ['scanCode:ok'].includes(res?.errMsg)
              ) {
                path = res.path;
              } else if (res.scanType == 'QR_CODE') {
                path = res.result;
              }
              this.scan(path);
            },
          });
        } else {
          uni.showToast({
            icon: 'none',
            title: `当前时间与操作巡更班次时间不匹配`,
            duration: 5000,
          });
        }
        /* #endif */
      } else {
        // url参数
        let obj = {
          roundsRecordId: item.roundsRecordId,
        };
        let str = this.$util.jsonToUrlParam(obj);
        this.onLocation(`/pages/patrol/staff/formCheck?${str}`);
      }
    },
    // 扫码
    scan(path) {
      console.log('path', path);
      // 提示
      uni.showToast({
        icon: 'none',
        title: `扫码获取信息中...`,
        duration: 5000,
      });
      // 取url路径参数
      const params = _.split(path, '?');
      let formattedParams = _.chain(params[1])
        .split('&')
        .map(_.ary(_.partial(_.split, _, '='), 1))
        .fromPairs()
        .value();
      // 情况判断
      if (path) {
        uni.hideToast();
        this.onLocation(`/${path}`);
      } else {
      }
    },
    // 跳转页面
    onLocation(url) {
      uni.navigateTo({
        url,
      });
    },
    // 跳转
    toNutrition(item) {
      // url参数
      let obj = item.nutrition;
      let str = this.$util.jsonToUrlParam(obj);
      this.onLocation(`/pages/repast/nutrients?${str}`);
    },
  },
};
</script>

<style lang="scss" scoped>
.container {
  min-height: calc(100vh - var(--window-bottom) - 200rpx);
  background: #f2f2f2;
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 20rpx;
  :deep(.uni-searchbar) {
    padding: 0;
  }
  .prodPraiseRanking-img {
    display: inline-block;
    width: 60rpx;
    height: 60rpx;
    position: fixed;
    bottom: 60rpx;
    right: 10rpx;
    z-index: 999;
  }
  :deep(.uni-forms) {
    .uni-forms-item__label {
      font-size: 28rpx;
      font-weight: 600;
      color: #333333;
    }
    .uni-easyinput__content {
      background: #f5f5f5 !important;
      .uni-easyinput__content-input {
        height: 33px;
      }
    }
    .uni-select {
      background: #f5f5f5;
    }
    .uni-date-x {
      background: #f5f5f5;
    }
    .uni-data-tree {
      background: #f5f5f5;
    }
  }
  .filterBtn {
    display: flex;
    align-items: center;
    .r {
      background: #6bb0ff;
      border-radius: 70rpx 0rpx 0rpx 70rpx;
    }
    .s {
      background: #5293ff;
      border-radius: 0rpx 70rpx 70rpx 0rpx;
    }
    .btn {
      width: 50%;
      font-size: 28rpx;
      color: #ffffff;
      margin: 0;
      &::after {
        border: none;
      }
    }
  }
  .date-p {
    padding: 20rpx;
  }
  .uni-navbar {
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    background-color: #fff;
    z-index: 9;
  }
  .dateBox {
    line-height: 1;
    padding: 24rpx 50rpx;
    display: flex;
    align-items: baseline;
    position: relative;
    .week {
      font-size: 36rpx;
      margin-right: 10rpx;
    }
    .date {
      color: #989898;
    }
    .icon {
      position: absolute;
      top: 16rpx;
      right: 40rpx;
    }
  }
  .listBox {
    flex: 1 1 auto;
    position: relative;
    .box {
      margin: 0 36rpx;
    }
    .outerItem {
      margin-bottom: 30rpx;
      display: block;
      &:last-child {
        margin-bottom: 0;
      }
    }
    .item {
      line-height: 1;
      padding: 26rpx 34rpx 32rpx;
      background: #ffffff;
      border-radius: 20rpx;
      box-shadow: 0rpx 4rpx 17rpx 0rpx rgba(0, 0, 0, 0.06);
      letter-spacing: 4rpx;
      position: relative;
      display: flex;
      align-items: center;
      .point {
        width: 18rpx;
        height: 18rpx;
        margin-right: 20rpx;
        background: #ffb93b;
        border-radius: 50%;
        &.green {
          background: #67c23a;
        }
      }

      .m {
        flex: 1;
        .k {
          width: 100%;
          display: flex;
          align-items: center;
          justify-content: space-between;
          .name {
            font-size: 28rpx;
            line-height: 33rpx;
          }
          .value {
            font-size: 28rpx;
            color: #989898;
            line-height: 33rpx;
            text-align: right;
          }
          .status {
            font-size: 24rpx;
            font-weight: 400;
            color: #fff;
            padding: 10rpx 20rpx;
            background: #409eff;
            border-radius: 20rpx;
            &.warn {
              background: #e6a23c;
            }
          }
          .verygood {
            width: 50rpx;
            height: 50rpx;
            .img {
              display: inline-block;
              width: 100%;
              height: 100%;
            }
          }
        }
        .l {
          padding-top: 20rpx;
          display: flex;
          align-items: center;
          .block {
            font-size: 28rpx;
            color: #989898;
            margin-right: 20rpx;
            &:last-child {
              margin-right: 0;
            }
          }
        }
      }
    }
  }
}
</style>
